<script setup>
import { ref, defineModel, onMounted, inject,onBeforeMount } from 'vue'
import API from '@/api/model/report.js'
import tsCodeEditor from '@/components/scCodeEditor/index.vue'
import { ElNotification } from 'element-plus';
import tool from "../utils/tool";
import { deepClone } from "@/utils/arr";
const form = defineModel('formData')

const dataList = ref([])
const emit = defineEmits(['addColumnList'])
const props = defineProps({
    configData: { type: Array, default: [] },
    tableId: { type: String, default: '' },
    referType:{ type: String, default: '' }
})
let fileName = inject('fileName')
const dsTypeList = [{ label: 'sql', value: 'sql' }, { label: 'cache', value: 'cache' }, { label: 'hql', value: 'hql' }]
const injectionTemplate = { key: '', value: '' }
const permissionsTemplate = { condition: '', noFilter: false, sql: '', remark: '' }
onBeforeMount(()=>{
    form.value.injectionConditionMap = form.value.injectionConditionMap ? tool.convert.mapToArr(form.value.injectionConditionMap) : []
})
onMounted(()=>{
    if(!form.value.permissions){
        form.value.permissions = []
    }
})
const analysis = async () => {
    if (form.value.dbService && form.value.sql) {
        let params = {
            fileName: fileName.value,
            tableId: props.tableId,
            dbService: form.value.dbService,
            sql: form.value.sql
        }
        let res = await API.parseSql.post(params)
        if(res.code == 200){
            dataList.value = res.dataList
            emit('addColumnList',dataList.value)
        }
    }
    else{
        ElNotification.warning({title:'请选择数据源并输入sql语句'})
    }

}
</script>
<template>
    <el-form style="margin-top: 20px;" :model="form" label-position="left">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="sql类型">
                    <el-select v-model="form.dsType" clearable placeholder="请选择：">
                        <el-option v-for="item in configData.dsTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="数据源服务名">
                    <el-select v-model="form.dbService" clearable placeholder="请选择：">
                        <el-option v-for="item in configData.dbServiceList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="数据转化类型">
                    <el-select v-model="form.convertType" clearable placeholder="请选择：">
                        <el-option v-for="item in configData.convertTypeList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="过滤权限的sql语句">
                    <!-- <el-input type="textarea" v-model="form.filterSql"></el-input> -->
                    <ts-code-editor style="width: 100%;" v-model="form.filterSql" :height="100"></ts-code-editor>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="条件表达式">
                    <ts-code-editor style="width: 100%;" v-model="form.whereExpress" :height="100"></ts-code-editor>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <template #label>
                <span>sql</span>
                <el-button v-if="referType == 'tableData'" style="margin-left:10px;margin-top: 5px;" size="small" @click="analysis">解 析</el-button>
            </template>
            <ts-code-editor style="width: 100%;" v-model="form.sql" :height="300"></ts-code-editor>
        </el-form-item>
        <div v-if="referType == 'tableData'">
        <sc-title title="解析生成列"></sc-title>
        <el-table :data="dataList" style="margin-bottom: 20px;">
            <el-table-column prop="label" label="名称"></el-table-column>
            <el-table-column prop="prop" label="字段名"></el-table-column>
        </el-table>
    </div>
        <el-form-item label="注入标识条件列表">
            <sc-form-table v-model="form.injectionConditionMap" :addTemplate="injectionTemplate" height="300">
                <el-table-column label="标识" width="160">
                    <template #default="scope">
                        <el-input v-model="scope.row.key"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="sql">
                    <template #default="scope">
                        <ts-code-editor style="width: 100%;" v-model="scope.row.value" :height="60"></ts-code-editor>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-form-item>
        <sc-title title="数据权限列表"></sc-title>
        <sc-form-table v-model="form.permissions" :addTemplate="permissionsTemplate" height="300">
            <el-table-column label="是否不要过滤" width="80">
                <template #default="scope">
                    <el-switch v-model="scope.row.noFilter" />
                </template>
            </el-table-column>
            <el-table-column label="验证条件" width="250">
                <template #default="scope">
                    <el-input v-model="scope.row.condition"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="sql">
                <template #default="scope">
                    <ts-code-editor style="width: 100%;" v-model="scope.row.sql" :height="60"></ts-code-editor>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="300">
                <template #default="scope">
                    <el-input type="textarea" v-model="scope.row.remark"></el-input>
                </template>
            </el-table-column>
        </sc-form-table>

    </el-form>
</template>

